<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- 视口标签 -->
<meta name="viewport"
	content="width=device-width, initial-scale=1, user-scalable=no" />
<!-- 删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 设置苹果工具栏颜色 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 忽略页面中的数字识别为电话，忽略email识别 -->
<meta name="format-detection" content="telphone=no, email=no" />
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- 适应移动端end -->
<link rel="stylesheet" type="text/css"
	href="${path }/resource/css/base.css" />
<link rel="stylesheet" type="text/css"
	href="${path }/resource/css/index.css" />
<link rel="stylesheet" href="${path }/resource/css/font/iconfont.css">
<script type="text/javascript"
	src="${path }/resource/js/plugin/jquery-2.1.4.min.js"></script>
<script type="text/javascript"
	src="${path }/resource/js/plugin/TouchSlide.1.1.js"></script>
<title>商品中心</title>
<style type="text/css">
.tab_icon, .tab_icon_on {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 20px;
	height: 20px;
	background: url(${path}/resource/images/tab_shuicon.png) no-repeat
		center;
	background-size: 20px auto;
}

.tab_icon_on {
	background: url(${path }/resource/images/tab_hicon.png) no-repeat center;
	background-size: 20px auto;
}

.pr_10 {
	padding-right: 10px;
}

.m_t {
	margin-top: 0.8rem;
	display: block;
}

.tab_list {
	display: -webkit-box;
	display: flex;
	height: 47px;
	line-height: 47px;
	background: #fff;
	border-bottom: 1px solid #ddd;
	position: relative;
	width: 100%;
	z-index: 100;
}

.tab_list .cur {
	color: #DD2727 !important;
}

.tab_list .select-li {
	-webkit-box-flex: 1;
	-ms-flex: 1;
	-webkit-flex: 1;
	flex: 1;
	display: block;
	width: 1px;
	text-align: center;
	font-size: 15px;
	color: #999;
}

.good_box {
	width: 50%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	float: left;
}

.good_box .good_img {
	width: 100%;
	height: 49vw;
	position: relative;
	background-color: #F7F7F7;
}

.good_box .good_img>img {
	max-width: 100%;
	max-height: 100%;
	position: absolute;
	background-color: #f7f7f7;
	top: 50%;
	left: 50%;
	-webkit-transform: translate3d(-50%, -50%, 0);
	transform: translate3d(-50%, -50%, 0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-perspective: 1000;
	perspective: 1000;
}

.good_box p {
	font-size: 12px;
	line-height: 18px;
	color: #333;
	height: 36px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	word-wrap: break-word;
	overflow: hidden;
}

.good_info {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-moz-box-flex: 1;
	-moz-flex: 1;
	-ms-flex: 1;
	flex: 1;
	display: block;
	padding: 9px;
}
/*头部*/
.head {
	height: 48px;
	position: relative;
	width: 100%;
	border-bottom: solid 1px #EEE;
	background-color: #000;
	z-index: 120;
	box-sizing: border-box;
}

.head .back {
	width: 34px;
	height: 48px;
	font-family: tm-list-m-font;
	font-style: normal;
	visibility: visible;
	z-index: 999;
	line-height: 48px;
	font-size: 25px;
	color: #5F646E;
	position: absolute;
	text-align: center;
}

.head .back .icon-left {
	font-size: 24px;
	color: #FFFFFF;
	font-weight: 500;
}

.head .searchbar_wrap {
	padding: 8px 54px 8px 10px;
	height: 32px;
}

.head .searchbar_wrap .searchbar {
	background-color: #EEE;
	height: 100%;
	color: #666;
	line-height: 30px;
	border-radius: 2px;
	-webkit-border-radius: 18px;
	-moz-border-radius: 18px;
	-ms-border-radius: 18px;
	overflow-x: auto;
	overflow-y: hidden;
	font-size: 14px;
	position: relative;
}

.head .searchbar_wrap .searchbar input {
	font-size: 14px;
	width: 100%;
	height: 100%;
	border: 0;
	padding: 8px 12px;
	box-sizing: border-box;
	line-height: 1;
	color: #333333;
}

.head .searchbar_wrap .searchbar .icon-search {
	padding: 0 12px;
	position: absolute;
	right: 0px;
	top: 2px;
	font-weight: 700;
}

.head .searchbar_wrap .searchbar input:after {
	content: ' ';
	display: inline-block;
	width: 30px;
}

.head .shop-category {
	padding-top: 11px;
	font-size: 10px;
	color: #fff;
	right: 0;
	top: 5px;
	width: 54px;
	height: 30px;
	line-height: 40px;
	position: absolute;
	text-align: center;
}

.head .shop-category .icon-fenlei {
	position: absolute;
	right: 16px;
	top: -8px;
	color: #fff;
	font-size: 20px;
}
</style>
</head>
<body>
	<div class="head">
<!-- 		<div class="back"> -->
<!-- 			<a href="#" onclick="javascript:history.back(-1);" class="iconfont icon-left"></a> -->
<!-- 		</div> -->
		<div class="searchbar_wrap">
			<div class="searchbar">
				<input type="text" id="queryText" placeholder="请输入关键字">
				<span class="iconfont icon-search" onclick="getGoodList(true);"></span>
			</div>
		</div>
		<div class="shop-category">
			<span class="iconfont icon-fenlei" onclick="window.location.href='${path}/app/goods/toCategory'"></span>分类
		</div>
	</div>
	<section class="tab_list">
		<ul class="row">
			<li class="col-20 select-li cur" id="li-all" data-sort="pro_id" data-order="asc"><span>综合</span><span
				class="line"></span></li>
			<li class="col-20 select-li" id="li-sale" data-sort="pro_sales_total"
				data-order="desc"><span>销量</span><span class="line"></span></li>
			<li class="col-20 select-li" id="li-new" data-sort="pro_id"
				data-order="desc"><span>新品</span><span class="line"></span></li>
			<li class="col-20 select-li" id="li-price" data-sort="pro_price"
				data-order="asc"><span>价格</span></li>
			<li class="col-20" id="tab_icon_li"><span class="tab_icon"></span></li>
		</ul>
	</section>
	<div id="main_content">
		<div class="main_content" style="width: 100%" v-show="showfirst">
			<section class="tab_content row" v-for="good in goods"
				@click="toDetail(good.proId)">
				<div class="tab_content_left">
					<img :src="getFirstImg(good)" width="180" height="180" alt="" />
				</div>
				<div class="tab_content_right col">
					<h1>{{good.proProvince}}&nbsp;{{good.proStyle}}{{good.proName}}&nbsp;{{good.proModel}}</h1>
					<span class="color_o"><b>&yen;</b>&nbsp;{{good.proPrice}}</span>
				</div>
			</section>
		</div>
		<div class="main_content" style="width: 100%" v-show="!showfirst">
			<section style="padding: 5px 5px;" class="tab_content row"
				v-for="(good, index) in goods" v-if="index <goods.length &&index%2==0">

				<div class="good_box" style="padding-right: 2.5px;"
					@click="toDetail(goods[index].proId)">
					<div class="good_img col">
						<img :src="getFirstImg(goods[index])" width="180" height="180"
							alt="" />
					</div>
					<div class="good_info">
						<p>{{goods[index].proProvince}}&nbsp;{{goods[index].proStyle}}{{goods[index].proName}}&nbsp;{{goods[index].proModel}}</p>
						<span class="color_o"><b>&yen;</b>&nbsp;{{goods[index].proPrice}}</span>
					</div>
				</div>
				<div class="good_box" style="padding-left: 2.5px;"
					v-if="index<goods.length-1" @click="toDetail(goods[index+1].proId)">
					<div class="good_img col">
						<img :src="getFirstImg(goods[index+1])" width="180" height="180"
							alt="" />
					</div>
					<div class="good_info">
						<p>{{goods[index+1].proBrand}}&nbsp;{{goods[index+1].proStyle}}{{goods[index+1].proName}}&nbsp;{{goods[index+1].proModel}}</p>
						<span class="color_o"><b>&yen;</b>&nbsp;{{goods[index+1].proPrice}}</span>
					</div>
				</div>
			</section>
		</div>
	</div>
</body>
<script type="text/javascript"
	src="${path }/resource/js/plugin/vue.min.js"></script>
<script type="text/javascript"
		src="${path }/resource/plugin/layer/layer.js"></script>
<script type="text/javascript">
	var globOffset = 0;
	var limit = 10;
	var globSort = '';
	var globOrder = '';
	
	$('.tab_list ul li.select-li').click(function() {
		$(this).addClass('cur').siblings().removeClass('cur');
		globSort = this.dataset.sort;
		globOrder = this.dataset.order;
		getGoodList(true);
	});

	$(".tab_icon").on('touchstart', function() {
		$(this).toggleClass("tab_icon_on");
		main_content.$data.showfirst = !main_content.$data.showfirst;
	});

	var goodList = new Array();
	var main_content = new Vue({
		el : '#main_content',
		data : {
			goods : goodList,
			showfirst : false
		},
		methods : {
			getFirstImg : function(imgs) {
				var img = '${path}/resource/images/null_img.jpg';
				if (imgs.goodImgList == null || imgs.goodImgList.length == 0) {
					return img;
				}
				return imgs.goodImgList[0].imgUrl;
			},
			toDetail : function(proId) {
				window.location.href = '${path}/app/goods/toDetail?proId='
						+ proId;
			}
		}
	});

	$(function() {
		globSort = $('#li-all').data("sort");
		globOrder = $('#li-all').data("order");
		getGoodList(true);
		
		console.log(main_content.$data);
	})

	var parentId = parseInt('${parentId}', 10);
	var childId = parseInt('${childId}', 10);
	
	var data = new Object();
	/**获取商品列表*/
	function getGoodList(isrefresh) {
		layer.load(2, {
			time : 10 * 1000,
			shade : [ 0.4, '#aeaeae' ]
		});
		
		if(isrefresh) {
			globOffset = 0;
		}
		data.offset = globOffset;
		data.limit = limit;
// 		if (sort && order) {
			data.sort = globSort;
			data.order = globOrder;
// 		}
		if($('#queryText').val()) {
			data.queryText = $('#queryText').val();
		} else {
			data.queryText = '';
		}
		if(parentId && !isNaN(parentId)) {
			data.parentId = parentId;
		} else if (childId && !isNaN(childId)) {
			data.childId = childId;
		}
		
		$.ajax({
			type : 'POST',
			url : '${path}/app/goods/showList',
			data : data,
			dataType : 'json',
			async : false,
			success : function(res) {
				setTimeout("layer.closeAll('loading')", 1000);
				globOffset += res.rows.length;
				if(isrefresh) {
					goodList = res.rows;
				} else {
					goodList.push.apply(goodList,res.rows);
				}
				//goodList = res.rows;
				main_content.$data.goods = goodList;//res.rows;
			}
		})
	}
	
	$(window).scroll(function(){
		var scrollTop = $(this).scrollTop();
		var scrollHeight = $(document).height();
		var windowHeight = $(this).height();
		if(scrollTop + windowHeight == scrollHeight){
			getGoodList(false);
		}
	});
</script>
</html>